<template>
  <div>
    <div class="breathing">
      <span :class="{'lamp':true,'active':status.isOpen}"></span>
      <span :class="{'lamp':true,'active':status.noError}"></span>
      <span :class="{'lamp':true,'active':status.isHeaet}"></span>
    </div>
  </div>
</template>

<script src="./ws.js"></script>

<style lang="less" scoped>
@import url('./../../../assets/config.less');
.breathing{
  @media (max-width:unit(@mobile,px)){
    display:none;
  }
  font-size:0;
  position: fixed;
  top:30px;left:70px;right:0;
  text-align: center;
  margin-left:auto;
  margin-right:auto;
  width:80px;
  padding:2px;
  border-radius: 20px;
  background-color:#ccc;
  .lamp{
    // font-size:12px;
    // text-align: center;
    display: inline-block;
    width:8px;height:8px;
    margin:2px;
    border-radius: 50%;
    background-color:#f00;
    &.active{
      background-color:#0f0;
    }
  }
}
</style>